<template>
	<div class="head-image" @click="showUserInfo($event)">
		<img class="avatar-image" v-show="url" :src=" url"
			:style="avatarImageStyle" loading="lazy" />
        <img class="avatar-image" v-show="!url && chatType == 'GROUP'" :src=" imageSrc"
             :style="avatarImageStyle" loading="lazy" />
		<div class="avatar-text" v-show="!url && chatType != 'GROUP' " :style="avatarTextStyle">
			{{name.substring(0,1).toUpperCase()}}
        </div>
		<div v-show="online" class="online" title="用户当前在线"></div>
		<slot></slot>
	</div>
</template>

<script>

    export default {
		name: "headImage",
        data() {
			return {
                imageSrc: require('@/assets/image/persons.png'),
				colors:["#fff"]

			}
		},
		props: {
			id:{
				type: Number
			},
			size: {
				type: Number,
				default: 50
			},
			width: {
				type: Number
			},
			height: {
				type: Number
			},
			radius:{
				type: String,
				default: "10%"
			},
			url: {
				type: String
			},
			name:{
				type: String,
				default: "?"
			},
			online:{
				type: Boolean,
				default:false
			},
            chatType:{
                type: String
            },
            groupRoleType:{
                type: Number
            }
		},
		methods:{
			showUserInfo(e){
				if(this.id && this.id>0){
					this.$http({
						url: `/user/find/${this.id}`,
						method: 'get'
					}).then((user) => {
					    console.log(JSON.stringify(user))
                        //groupRoleType:  1群主 2管理员 3普通成员
					    //在群聊查看信息。并且是现场民警则显示按钮
                        let groupInner = this.$store.state.uiStore.userInfo.groupChat;//点击了群聊
                        let roleType = user.roleType;
                        console.log("groupInner:"+groupInner+"roleType:"+roleType+"groupRoleType:"+this.groupRoleType)
                        //显示设置管理员按钮
					    if (groupInner && roleType == 2 && this.groupRoleType == 3){//roleType :1普通民警 2现场民警 3标注员 4运营方 5需求方 6 其他
                            //设置 现场民警可以设置为 群管理员的状态为true
                            this.$store.commit("showAdminSet");
                        }else {
                            this.$store.commit("closeAdminSet");
                        }
				        //显示取消管理员按钮
                        if (groupInner && roleType == 2 && this.groupRoleType == 2){//roleType :1普通民警 2现场民警 3标注员 4运营方 5需求方 6 其他
                            //设置 现场民警可以设置为 群管理员的状态为true
                            this.$store.commit("cancleAdmin",true);
                        }else {
                            this.$store.commit("cancleAdmin",false);
                        }
						this.$store.commit("setUserInfoBoxPos",e);
						this.$store.commit("showUserInfoBox",user);
					})
				}
			}
		},
		computed:{
			avatarImageStyle() {
				let w = this.width ? this.width : this.size;
				let h = this.height ? this.height : this.size;
				return `width:${w}px; height:${h}px;
					border-radius: ${this.radius};`
			},
			avatarTextStyle() {
				let w = this.width ? this.width : this.size;
				let h = this.height ? this.height : this.size;
				return `width: ${w}px;height:${h}px;
					color:${this.textColor};font-size:${w*0.4}px;
					border-radius: ${this.radius};`
			},
			textColor(){
				let hash = 0;
				for (var i = 0; i< this.name.length; i++) {
					hash += this.name.charCodeAt(i);
				}
				return this.colors[hash%this.colors.length];
			}
		}
	}
</script>

<style scoped lang="scss">
	.head-image {
		position: relative;
		cursor: pointer;
		.avatar-image {
			position: relative;
			overflow: hidden;
			display: block;
		}

		.avatar-text{
			background-color: rgb(32, 116, 222);/* 默认背景色 */
			border-radius: 15%; /* 圆角效果 */
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.online{
			position: absolute;
			right: -5px;
			bottom: 0;
			width: 12px;
			height: 12px;
			background: limegreen;
			border-radius: 50%;
			border: 3px solid white;
		}
	}
</style>
